<template>
  <el-table
    ref="moviesTable"
    :data="waybillData"
    size="mini"
    border
    style="width: 100%"
  >
    <el-table-column :render-header="renderHeader" label="运单号-参考号" width="100px" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{ scope.row.waybillNo }}</span>
        </div>
        <div>
          <span>{{ scope.row.referenceNo }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="订单状态-国内仓库" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{m(waybillStatusMap[scope.row.status])  }}</span>
        </div>
        <div>
          <span>{{ placeOfReceiptMap[scope.row.storageLocation] }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="主跟踪号-入库渠道" width="150px" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{ scope.row.trackNumber }}</span>
        </div>
        <div>
          <span>{{ instockChannelMap[scope.row.inStockChannel] }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="起运地" prop="waybillSubNo">
      <template slot-scope="scope">
        <span>{{ loadingPortCnMap[scope.row.loadingPort] }}</span>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="目的国-派送地址" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{ countryMap[scope.row.countryId] }}</span>
        </div>
        <div>
          <span>{{ scope.row.dispatchAddressCode }}</span>
        </div>
      </template>
    </el-table-column>
<!--    <el-table-column :render-header="renderHeader" label="渠道能力-国内分区" prop="waybillSubNo">-->
<!--      <template slot-scope="scope">-->
<!--        <div>-->
<!--          <span>{{ scope.row.channelCapacityLabel }}</span>-->
<!--        </div>-->
<!--        <div>-->
<!--          <span>{{ countryStateNameMap[scope.row.provinceId] }}</span>-->
<!--        </div>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column :render-header="renderHeader" label="客户实重-入库实重" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{ scope.row.customerActualWeight }}</span>
        </div>
        <div>
          <span>{{ scope.row.inStockActualWeight }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="客户体积-入库体积" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{ scope.row.customerVolume }}</span>
        </div>
        <div>
          <span>{{ scope.row.inStockVolume }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="客户计费重-入库计费重" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{ scope.row.customerChargedWeight }}</span>
        </div>
        <div>
          <span>{{ scope.row.inStockChargedWeight }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="客户件数-入库件数" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{ scope.row.customerTotalPackages == null ? 0 : scope.row.customerTotalPackages }}</span>
        </div>
        <div>
          <span>{{ scope.row.inStockTotalPackages == null ? 0 : scope.row.inStockTotalPackages }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="申报总额-服务商" prop="waybillSubNo">
      <template slot-scope="scope">
        <span> {{ scope.row.totalDeclareValue ? scope.row.totalDeclareValue.toFixed(2) : scope.row.totalDeclareValue }} {{
            scope.row.declareValueCurrency
          }}</span>
        <!--        <span-->
        <!--          v-if="-->
        <!--          -->
        <!--            ((!verifyShow.saler && !verifyShow.saleAssistant &&  !verifyShow.seller && !verifyShow.shippingOperte) || verifyShow.superAdmin) &&-->
        <!--            serveCompanyMap-->
        <!--        "-->
        <!--        >{{ serveCompanyMap[data.serviceCompanyId] }}</span-->
        <!--        >-->
      </template>
    </el-table-column>
<!--    <el-table-column :render-header="renderHeader" label="销售-客服" prop="waybillSubNo">-->
<!--      <template slot-scope="scope">-->
<!--        <div>-->
<!--          <span>{{ userMap[scope.row.salesmanId] }}</span>-->
<!--        </div>-->
<!--        <div>-->
<!--          <span>{{ userMap[scope.row.servicesId] }}</span>-->
<!--        </div>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column :render-header="renderHeader" label="入库时间-出库时间" width="150px" prop="waybillSubNo">
      <template slot-scope="scope">
        <div>
          <span>{{ scope.row.inStockTime }}</span>
        </div>
        <div>
          <span>{{ scope.row.outStockTime }}</span>
        </div>
      </template>
    </el-table-column>
<!--    <el-table-column :render-header="renderHeader" label="跟单操作-海外操作" prop="waybillSubNo">-->
<!--      <template slot-scope="scope">-->
<!--        <div>-->
<!--          <span>{{ userMap[scope.row.operationId] }}</span>-->
<!--        </div>-->
<!--        <div>-->
<!--          <span>{{ userMap[scope.row.overseasOperatorId] }}</span>-->
<!--        </div>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column :render-header="renderHeader" label="起运港-目的港-中转港" prop="waybillSubNo">
      <template slot-scope="scope">
        <span>{{ configAirCodeMap[scope.row.shipmentPort] }}</span>
        <span>{{ configAirCodeMap[scope.row.destinationPort] }}</span>
        <span>{{ configAirCodeMap[scope.row.transferPort] }}</span>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="交货条款-到仓件数" prop="waybillSubNo">
      <template slot-scope="scope">
<!--        <div v-if="scope.row.deliveryTerms !=null && scope.row.deliveryTerms=='DDP'">-->
<!--          <img  :src="ddu"/>-->
<!--        </div>-->
<!--        <div>-->
<!--          <span>{{ scope.row.arrivalTotalPackages }}</span>-->
<!--        </div>-->
        <deliveryTerms
          :data="scope.row"
        ></deliveryTerms>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" width="150px" label="备注信息-其他信息" prop="waybillSubNo">
      <template slot-scope="scope">
        <viewInfo
          :data="scope.row"
        ></viewInfo>
      </template>
    </el-table-column>
    <el-table-column :render-header="renderHeader" label="操作">
      <template slot-scope="scope">
        <seaairlist
          :data="scope.row"
        ></seaairlist>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {m} from "@/store/yg/common/local"
import {ajax} from "@/store/yg/common/utils";
import dduPng from "@/assets/images/ddu.png";
import ddpPng from "@/assets/images/ddp.png";
const viewInfo = () => import("./viewInfo");
const seaairlist = () => import("../operation/seaairlist");
const deliveryTerms = () => import("./deliveryTerms");


export default {
  props: [
    'row', 'data', 'more'
  ],
  components: {
    viewInfo,
    seaairlist,
    deliveryTerms
  },
  data() {
    return {
      waybillData: {},
      ddu: dduPng,
      ddp: ddpPng,
      customerMap:"",
      waybillStatusMap:"",
      placeOfReceiptMap:"",
      instockChannelMap:"",
      loadingPortCnMap:"",
      countryStateNameMap:"",
      countryMap:"",
      configAirCodeMap:"",
      userMap:""

    }
  },
  mounted() {
    console.log(this.$store.state)
    this.querySeaAirDismantle();

    this.waybillStatusMap = this.$store.state.main.entry.sources[
      "waybillStatusSource"
      ];
    console.log(this.waybillStatusMap);
    this.placeOfReceiptMap = this.$store.state.main.entry.sources[
      "placeOfReceiptSource"
      ];
    this.instockChannelMap = this.$store.state.main.entry.sources[
      "instockChannelSource"
      ];
    this.loadingPortCnMap = this.$store.state.main.entry.sources[
      "loadingPortCnSource"
      ];
    this.countryMap = this.$store.state.main.entry.sources[
      "countrySource"
      ];
    this.countryStateNameMap = this.$store.state.main.entry.sources[
      "countryStateNameSource"
      ];
    this.userMap = this.$store.state.main.entry.sources[
      "userSource"
      ];
    this.configAirCodeMap = this.$store.state.main.entry.sources[
      "configAirCodeSource"
      ];
  },
  methods: {
    m(k) {
      return m(k);
    },
    async querySeaAirDismantle() {
      const attrs = {
        class: "com.tofba.app.client.seaair.SeaAirExpressListClient"
      };
      await ajax("queryDismantleSeaAir", {waybillId: this.data.id}, attrs).then(
        res => {
          if (res.code === 200) {
            this.waybillData = res.data;

          }
        });
    },
    renderHeader(h, {column}) {
      let header = column.label.split('-');
      return [h('p', [
        h('p', {}, header[0]),
        h('span', {}, header[1]),
        h('span', {}, header[2])
      ])];
    },
    initShow(deliveryTerms) {
      if (null != deliveryTerms && deliveryTerms == "DDP") {
        this.ddu = ddpPng;
      } else {
        this.ddu = dduPng;
      }
    }
  }
}

</script>

<style scoped>

</style>
